<template>
    <div>
        <a-table :dataSource="detail" :columns="columns" bordered :pagination="false">
            <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'action'">
                    <div style="display: flex; align-items: center;">
                        <a-button type="link" @click="openDetail(record.id)">查看详细信息</a-button>
                        <!-- <a-button type="link" @click="exReport(record.id)">生成报告</a-button> -->
                        <a-button type="link" @click="doHistory(record)">修改记录</a-button>
                        <a-button type="link" @click="editData(record)">编辑</a-button>
                        <AntdZh><a-popconfirm title="确定删除该条记录 ?" @confirm="del(record)">
                                <a-button type="link" danger>取消</a-button>
                            </a-popconfirm></AntdZh>
                    </div>
                </template>
            </template>
        </a-table>
        <AntdZh>
            <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total"
                @change="getList" />
        </AntdZh>
        <!-- 详细信息抽屉 -->
        <a-drawer width="80%" title="详细信息" v-if="open" v-model:visible="open">
            <template #extra>
                <a-button type="primary" style="margin-right: 20px;" @click="exReport(selectedReport)">报告下载</a-button>
                <a-button v-if="!showPort" type="primary" @click="showPort = true">报告预览</a-button>
                <a-button v-if="showPort" type="primary" @click="showPort = false">返回</a-button>
            </template>
            <!-- 详细信息 -->
            <AccidentDetail v-if="!showPort" :reportId="selectedReport"></AccidentDetail>
            <!-- 预览 -->
            <div v-if="showPort">
                <FileList :fileIds="fileIds"></FileList>
            </div>
        </a-drawer>
        <!-- 历史弹窗 -->
        <AntdConfirmModal :showConfirm="false" title="修改记录" ref="HistoryModalRef" width="600px">
            <HistoryTable :historyData="historyData" @getDetail="openDetail"></HistoryTable>
        </AntdConfirmModal>
    </div>
</template>
<script setup>
import { exportList } from "@/api/design/export.js";
import AccidentApi from "@/api/salvage/accidentAlert.js";
import AccidentDetail from '../detail';
import FileList from "@/custom/salvage/components/FileList.vue";
import HistoryTable from "@/custom/preTest/pages/plan/components/data/type/HistoryTable.vue";
import useApp from "@/hooks";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
const detail = ref(props.result)
const emit = defineEmits(['editInfo'])
const { $, proxy } = useApp();
const selectedReport = ref(false);
const open = ref(false)
const query = ref({ pageNum: 1, pageSize: 10, sortBy: 'id', searchKey: '' });
const props = defineProps({
    result: Array
})
const showPort = ref(false)
const historyData = ref([])
const HistoryModalRef = ref(null);
const fileIds = ref({
    id: '',
    type: '事故快报'
})
const total = ref(1)
const columns = [
    {
        title: '井名',
        dataIndex: 'wellId',
        key: 'wellId',
        width: '15%'
    },
    {
        title: '油气田',
        dataIndex: 'gasName',
        key: 'gasName',
        width: '15%'
    },
    {
        title: '填报单位',
        dataIndex: 'unit',
        key: 'unit',
        width: '20%'
    },
    {
        title: '填报时间',
        dataIndex: 'fillDate',
        key: 'fillDate',
        width: '15%'
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
    }
];
// 删除
const del = obj => {
    // console.log(obj)
    query.value.wellId = obj.wellId
    AccidentApi.queryList(query.value).then(res => {
        let wellHisList = res.content
        $.showToast({
            title: '删除成功',
            icon: 'success'
        })
        wellHisList.forEach(element => {
            AccidentApi.deleteOne(element.id).then(res => {
                getList()
            })
        });
    })
}
function getList() {
    let uid = localStorage.getItem('userId')
    if (userStore.isAdmin !== true) {
        query.value.createUserId = uid
    }
    query.value.wellId = ''
    AccidentApi.queryLastList(query.value).then((response) => {
        detail.value = response.content;
        total.value = response.totalElements;
    });
}
getList();
// 历史上传
function doHistory(e) {
    // console.log(e);
    query.value.wellId = e.wellId
    AccidentApi.queryList(query.value).then(res => {
        console.log(res);
        historyData.value = res.content
        HistoryModalRef.value.openModal();
    })
}
// 编辑
function editData(e) {
    emit("editInfo", e)
}
// 打开详细面板
function openDetail(objId) {
    console.log('objId', objId);
    if (typeof objId === 'object' && objId !== null) {
        objId = objId.id
    }
    open.value = true;
    selectedReport.value = objId;
    // console.log('selectedReport.value', selectedReport.value);
    fileIds.value.id = objId
}
function exReport(e) {
    console.log(e);
    let queryPort = { schemeId: e, templateFileId: "", }
    let queryTemplate = { templateDesc: "事故快报", templateVersion: "" };
    exportList(queryTemplate).then((r) => {
        // console.log('导出',r);
        queryPort.templateFileId = r[r.length - 1].templateFileId;
        window.open(
            `/dev-api/salvage/accidentAlert/schemes/export?schemeId=${queryPort.schemeId}&templateFileId=${queryPort.templateFileId}`
        );
    });
}
</script>